// 清除浮动
@mixin clearfix() {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// 字符移除 出现省略号
@mixin ellipsis($line: 1) {
  overflow: hidden;
  -webkit-line-clamp: $line;
  line-clamp :$line;
  display: -webkit-box;    /*定义盒子元素*/
  display: box;
  -webkit-box-orient: vertical; /*里面元素垂直排列*/
  box-orient: vertical;
}

@mixin add-arrow($direction, $size, $color) {
  $deg: 0deg;
  @if $direction == 'left' {
    $deg: -135deg;
  }
  @if $direction == 'right' {
    $deg: 45deg;
  }
  @if $direction == 'top' {
    $deg: 315deg;
  }
  @if $direction == 'bottom' {
    $deg: -225deg;
  }
  &:after {
    display: inline-block;
    width: $size;
    height: $size;
    transform: rotate3d(0, 0, 1, $deg);
    border-top: 1rpx solid $color;
    border-right: 1rpx solid $color;
    content: '';
  }
}

@mixin border($direction, $position: absolute) {
  position: relative;
  &:after {
    position: $position;
    @if $direction == 'left' {
      left: 0;
      top: 0;
      width: 1px;
      height: 100%;
      transform: scaleX(0.5);
    }
    @if $direction == 'right' {
      right: 0;
      top: 0;
      width: 1px;
      height: 100%;
      transform: scaleX(0.5);
    }
    @if $direction == 'top' {
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
    }
    @if $direction == 'bottom' {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
    }
    display: block;
    background: #ddd;

    content: "";
  }
}

// fadeIn 动画
@mixin fadeIn {
  opacity: 0;
  animation: fadeIn 0.35s linear forwards;
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
}
